<template>
   <el-card shadow="never" class="aui-card--fill">
        <el-form label-position="top" label-width="100px">
            <el-form-item  >
                <file-down api-url="/teacher/down/file" :file-id=-1 icon="el-icon-download" type="primary" title="开题报告模板下载"
                    :file-info="fileInfo" :pre-view="false"></file-down>
            </el-form-item>
        
            <el-form-item :label="isUploaded ?'上传开题报告':'重新上传开题报告'">
                <file-upload url="/student/report" @submitToParent="getDataList"></file-upload>
            </el-form-item>
        </el-form>
       <!-- "showDatas.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" -->
       <el-table fixed :data="dataList" border v-loading="dataListLoading">
           <el-table-column header-align="center" align="center" type="index" label="编号" width="50"></el-table-column>
        <el-table-column header-align="center" align="center" width="200" prop="filename" show-overflow-tooltip label="开题报告" >
            
        </el-table-column>
        
           <!-- <el-table-column prop="prospect" show-overflow-tooltip width="150" label="理论意义或应用前景"  >
           </el-table-column>
           <el-table-column prop="route" show-overflow-tooltip width="180" label="研究思路，方法，技术"  >
           </el-table-column>
           <el-table-column prop="plan" show-overflow-tooltip width="150" label="总体计划，进度计划" >
           </el-table-column> -->
           <el-table-column prop="status" 
           header-align="center" align="center" 
           show-overflow-tooltip width="80" label="审核情况" >
               <template slot-scope="scope">
                   <el-tag v-if="scope.row.status === 0" size="small" type="info">审核中</el-tag>
                   <el-tag v-if="scope.row.status === 1" size="small" type="danger">驳回</el-tag>
                   <el-tag v-if="scope.row.status === 2" size="small" type="success">通过</el-tag>
               </template>
           </el-table-column>
           <el-table-column prop="advise" header-align="center" align="center" show-overflow-tooltip   label="指导意见">
           </el-table-column>
           <el-table-column header-align="center" align="center" width="180" prop="gmtModified" show-overflow-tooltip  label="修改时间"  >
           </el-table-column>
           <el-table-column label="操作" header-align="center" align="center" width="200" fixed="right">
               <template slot-scope="scope" >
                   <!-- <el-button size="mini" icon="el-icon-edit" type="success" @click="handleEdit(scope.row)">
                       下载</el-button> -->
                    <file-down api-url="/student/down/report" :file-id="scope.row.id" icon=" "
                        :FileInfo="scope.row" size="mini" type="text" title="下载"></file-down>
                    <file-down 
                        api-url="/student/down/report" :file-id="scope.row.id" 
                        :pre-view="true" icon=" "
                        :FileInfo="scope.row" 
                        size="mini"  type="text" title="预览"></file-down>
                   <el-button size="mini" icon="" type="text"   @click="handleDelete()"> 删除</el-button>
               </template>
           </el-table-column>
       </el-table>

       <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
           :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper" :total="dataList.length">
       </el-pagination> -->
   </el-card>
</template>

<script>
import FileDown from '@/components/FileDown.vue';
import FileUpload from '@/components/FileUpload.vue';
import servicesApi from '@/services/servicesApi';

export default {
    name: 'Table',
    components: { FileDown, FileUpload },
    data() {
        return {
            isUploaded: true, //是否上传开题报告过
            myTitle: '提交开题报告',
            activeName: '', //折叠面板
            dataForm: {
                prospect: '',
                route: '',
                plan: '',
            },
            UpdateForm: {
                prospect: '',
                route: '',
                plan: '',
            },
            dataListLoading: false, //加载状态
            dataListSelections: [], // 多选 
            addOrUpdateVisible: false, // 可见性
            currentPage: 1,    // 当前页
            pageSize: 10,      // 每页大小，默认10
            dataList: [
                // {
                //     id: 9,
                //     susername: "student",
                //     prospect: "string",
                //     route: "string1",
                //     plan: "string",
                //     advise: null,
                //     createby: "sTest",  
                //     repTeacher: "teacher",  
                //     status: null,  
                //     deleted: 0,  
                //     gmtCreate: "2022-11-19T10:18:38.000+00:00",  
                //     gmtModified: "2022-11-19T10:19:25.000+00:00",  
                //     version: 2  
                // },
            ],     // 原始table数据
            showDatas: [],     // 展示的table数据
            fileInfo: {
                filename: '开题报告模板',
                path: 'student/report',
                suffix: 'docx'
            }
        }
    },
    created() {
        this.getDataList()   // 页面初始化，请求数据并在表格显示
    },
   
   methods: {
       handleEdit(row) {
           // console.log('+++++++修改开题报告++++')
           // console.log(row)
           if (row===null) {
               this.activeName = '1'
               return;
           }
           this.dataForm.plan = row.plan
           this.dataForm.prospect = row.prospect
           this.dataForm.route = row.route
           this.activeName='1'
       },
       //提交开题报告 
       submitReport() {
           servicesApi.submitReport(this.dataForm).then(res => {
               let code = res.data.code
               if (code === 200) {
                   this.$message({
                       message: '提交成功',
                       type: 'success',
                       duration: 1000,
                       onClose: () => {
                           this.getDataList()
                           this.activeName = null
                           this.dataForm = {}
                       }
                   })
               } else {
                   this.$message({
                       message: res.data.msg,
                       type: 'error',
                       duration: 1000,
                       onClose: () => {
                           this.getDataList()
                           this.activeName = null
                           this.dataForm ={}
                       }
                   })
               }
           })
       },
       handleDelete() {
           servicesApi.delReport().then(res => {
               // console.log(res.data)
               let code = res.data.code
               if (code === 200) {
                   this.$message({
                       message: '删除成功',
                       type: 'success',
                       duration: 1000,
                       onClose: () => {
                           this.getDataList()
                       }
                   })
               } else {
                   this.$message({
                       message: res.data.msg,
                       type: 'error',
                       duration: 1000,
                       onClose: () => {
                           this.getDataList()
                       }
                   })
               }
           })
       },
       // 获取数据
       getDataList() {
           // this.showDatas = this.dataList.slice(0, this.pageSize);  // 然后显示区间数据（无排序触发），且这里显示1-10条
           this.dataListLoading = true
           servicesApi.getReport().then(res => {
               // console.log(res.data)
               let code = res.data.code
               let data = res.data.data
               if (code === 200 && data) {
                   let list=[]
                   list[0]=data
                   this.dataList = list
                   // this.totalPage = data.total
               } else {
                   this.dataList = []
                   // this.totalPage = 0
               }
               this.dataListLoading = false
           })
       },
       // 1.改变页面选项触发的方法（val:显示的每页大小）
       handleSizeChange(val) {
           this.currentPage = 1;   // 跳转第一页
           this.pageSize = val     // 每页大小赋值给绑定的pageSize
           this.showDatas = this.dataList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);   // 抓取区间数据
       },

       // 2.改变页码触发的方法(val:触发的当前页码)
       handleCurrentChange(val) {
           this.currentPage = val;  // 跳转当前页
           this.showDatas = this.dataList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);   // 抓取区间数据
       },
       // 3.排序监听
       sortChange(column) {
           this.dataList = this.dataList.sort(
               this.SortFun(column.prop, column.order === 'ascending')
           );
           this.showDatas = this.dataList.slice(0, this.pageSize);
           this.currentPage = 1;
       },

       // 4.排序方法
       SortFun(attr, rev) {
           this.currentPage = 1;
           //第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
           if (rev == undefined) {
               rev = 1;
           } else {
               rev = rev ? 1 : -1;
               //rev = rev>0 ? 1 : -1;
           }
           return function(a, b) {
               a = a[attr];
               b = b[attr];
               if (a != null) {
                   // 1.列数据类型为string时的排序
                   if (typeof a == 'string') {
                       // 1.1 判断是否为日期类型
                       if (a.split(' ').length === 2) {
                           if (a < b) {
                               return rev * -1;
                           }
                           if (a > b) {
                               return rev * 1;
                           }
                           return 0;
                       } else if (!isNaN(a)) {
                           // 是否能转为数字类型
                           // // console.log("字符数字类型",attr,a)
                           if (parseFloat(a) < parseFloat(b)) {
                               return rev * -1;
                           }
                           if (a > b) {
                               return rev * 1;
                           }
                           return 0;
                       }
                       else {
                           // 1.2 普通字符类型
                           //// console.log("普通字符类型",attr,a)
                           if (a < b) {
                               return rev * -1;
                           }
                           if (a > b) {
                               return rev * 1;
                           }
                           return 0;
                       }
                   }
                   // 2. 列数据类型为number时的排序
                   if (typeof a == 'number') {
                       //// console.log("Number型:", a);
                       if (a < b) {
                           return rev * -1;
                       }
                       if (a > b) {
                           return rev * 1;
                       }
                       return 0;
                   }
               }
           };
       },

      
   },

};
</script>

<style scoped>
.my>>>.el-collapse-item__header {
   background-color: rgb(241, 244, 245);
   color: blue;
   padding: 20px;
   font-size: medium;
}

.my>>>.el-collapse-item__wrap {
   background-color: #f1f4f5;
}

.item>>>.el-form-item__label {
   /* color:red; */
   font-size: medium;
   padding: 0px 20px;
}

.item>>>.el-form-item__content {
   padding: 0px 20px;
   /* background-color: white; */
}
/* .Table {
   position: absolute;
   top: 0px;
   left: 0px;
} */

/* .search {
   width: 50%;
   display: inline-flex;
   padding: 20px;
}

.searchItem {
   margin-left: 15px;
} */
</style>
